<!DOCTYPE html>
<html>
<head>
    <title> sesium Demo </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="js/Cesium.js"></script>
    <link href="css/widgets.css" rel="stylesheet">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/npm.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css"/>
    <style>
        @import url(css/widgets.css);

        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
<!--<input type="text" id="clock">-->
<div id="cesiumContainer"></div>
<div id="showInfo">

</div>

<div id="showSocketInfo"
     style="background-color: rgba(0,0,0,0.4);width:10%;height:15%;position:absolute;top:16%;left:1%;z-index:1;font-size:15px;">

</div>

</body>
</html>

<!-- 1、获取viewer对象 -->
<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        /*        imageryProvider : Cesium.createTileMapServiceImageryProvider({
                    url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') //使用的是默认的离线地图离线地图
                }),*/
        shouldAnimate: true,
        infoBox: false,
        selectionIndicator: false,
        shadows: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
    });
</script>

<!-- 2、加载渲染代码 -->
<script src="js/cesiumFlight.js"></script>

<!-- 3、调用更新 -->
<script>

    init();

    function init() {
        self.setInterval("clock()", 1010);
    }

    var myArray = [[0, 116.59, 39.88, 0]
        /*        ,[10, 116.83, 39.84, 48750]*/
    ];
    var arr = new Array(4);
    // console.log(myArray);

    // socket 开始
    var websocket = null;
    if ('WebSocket' in window) {
        console.log("cesium-socket 开始...");
        //建立webSocket连接
        websocket = new WebSocket('ws://localhost:8080/websocket');
    } else {
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        console.log("cesium-WebSocket连接发生错误");
        $("#showSocketInfo").append("<div class=\"alert alert-danger\" role=\"alert\">连接发生错误</div>\n");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        console.log("cesium-WebSocket连接成功");
        $("#showSocketInfo").empty()
        $("#showSocketInfo").append("<div class=\"alert alert-success\" role=\"alert\">通讯连接成功</div>\n");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        console.log("cesium-接收到==>" + event.data);
        // setMessageInnerHTML(event.data);
        var split = event.data.split(",");
        arr[0] = split[0];
        arr[1] = split[1];
        arr[2] = split[2];
        arr[3] = split[3];

        myArray.push(arr);

        console.log(myArray)
        // console.log("arr --- >"+arr)
    };

    //连接关闭的回调方法
    websocket.onclose = function () {
        $("#showSocketInfo").empty()
        $("#showSocketInfo").append("<div class=\"alert alert-danger\" role=\"alert\">连接发生错误</div>\n");
    };

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    };

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        // console.log("")
        // document.getElementById('message').innerHTML += innerHTML + '<br/>';
    };

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    };

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    };

    // socket 结束

    //测试数据 [时间，经度，纬度，高程]
    // var myArray = [
    //     [0,-119,35.1219512195122,0],
    //     [10,-118,35.2439024390244,48750]
    // ];

    //初始化模型   (modelURL,isShowInfo,longitude,latitude,height,heading,pitch,roll){
    doScene('model/CesiumAir/Cesium_Air.gltf', true, 116.59, 39.88, 0, 0, 0, 0);

    //定时器
    var i = 0;

    function clock() {
        var date = new Date();
        var time = date.toLocaleTimeString();
        // document.getElementById("clock").value = time;

        var position = new Cesium.Cartesian3();

        position = Cesium.Cartesian3.fromDegrees(myArray[i][1], myArray[i][2], myArray[i][3]);//(经度，纬度，高程)

        var gheading = Cesium.Math.toRadians(i * 10);//俯仰角
        var gpitch = Cesium.Math.toRadians(0);//偏行角
        var groll = Cesium.Math.toRadians(0);//滚转角

        var hpr = new Cesium.HeadingPitchRoll(gheading, gpitch, groll);
        var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

        //更新位置
        viewer.entities.getById("myEntity").position = position;
        //更新姿态
        viewer.entities.getById("myEntity").orientation = orientation;
        i++;

        if (i == myArray.length) {
            i = 0;
        }
    }


</script>